<template>
  <div>
    <div class="container">
      <h2>合作伙伴</h2>
      <div class="zi">消防合作，筑牢安全防线，合作共建，消防无小事</div>
      <div
        class="bigbox d-flex"
        @mouseover="stopCarousel"
        @mouseout="startCarousel"
      >
        <div class="next" @click="leftarrow"><</div>
        <div class="longbox d-flex" ref="carousel">
          <div v-for="(item, index) in lunbo" :key="index" style="margin: 15px">
            <img :src="item.tu" alt="" id="image" />
          </div>
        </div>
        <div class="next next2" @click="rightarrow">></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
var Time = 0; //轮播时间
let carousel = ref(); //轮播
const intervalId: any = ref(null); // 轮播
// 切换到下一张图片
function nextSlide() {
  Time++;
  // if (Time != 4) {
  //   carousel.value.style.transform = `translateX(${-11.375 * Time}rem)`;
  // } else {
  //   carousel.value.style.transform = `translateX(${0}rem)`;
  //   Time = 0;
  // }
}
// 初始化轮播图
function startCarousel() {
  if (!intervalId.value) {
    intervalId.value = setInterval(nextSlide, 2000); // 每3秒切换到下一张图片
  }
}
// 停止轮播图
function stopCarousel() {
  if (intervalId.value) {
    clearInterval(intervalId.value);
    intervalId.value = null;
  }
}
onMounted(() => {
  startCarousel();
});
//轮播点击
function leftarrow() {
  Time--;
  if (Time == -1) {
    Time = 3;
  }
  carousel.value.style.transform = `translateX(${-11.375 * Time}rem)`;
}
function rightarrow() {
  Time++;
  if (Time == 4) {
    Time = 0;
  }
  carousel.value.style.transform = `translateX(${-11.375 * Time}rem)`;
}
let lunbo = ref([
  {
    id: 1,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E5%AE%9D%E5%AE%89%E5%A4%96%E5%9B%BD%E8%AF%AD%E5%AD%A6%E6%A0%A1.png",
  },
  {
    id: 2,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E4%BF%9D%E5%AE%89%E5%A6%87%E5%B9%BC%E4%BF%9D%E5%81%A5.png",
  },
  {
    id: 3,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E8%99%B9%E5%B2%AD%E5%AD%A6%E6%A0%A1.png",
  },
  {
    id: 4,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E7%A7%91%E6%8A%80%E5%A4%A7%E5%AD%A6.png",
  },
  {
    id: 5,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E9%BE%99%E5%B2%97%E7%AC%AC%E4%BA%8C%E5%8C%BB%E9%99%A2.png",
  },
  {
    id: 6,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E9%BE%99%E5%B2%97%E5%8C%BB%E9%99%A2.png",
  },
  {
    id: 7,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E6%B7%B1%E5%9C%B3%E5%A4%A7%E5%AD%A6.png",
  },
  {
    id: 8,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E6%B7%B1%E5%9C%B3%E5%A4%A7%E5%AD%A6%E6%80%BB%E5%8C%BB%E9%99%A2.png",
  },
  {
    id: 9,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E6%B7%B1%E5%9C%B3%E5%9C%B0%E9%93%81.png",
  },
  {
    id: 10,
    tu: "https://www.wzxfpx.com/wp-content/uploads/2023/05/%E6%B7%B1%E5%9C%B3%E5%8C%BB%E9%99%A2.png",
  },
]);
</script>

<style scoped lang="scss">
h2 {
  text-align: center;
  margin-bottom: 16px;
  font-family: Open Sans;
  font-weight: 300;
  font-size: 2.625em;
  line-height: 1.143;
  color: rgb(23, 37, 42);
}
.zi {
  font-family: Open Sans;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(70, 112, 127);
  text-align: center;
}
.bigbox {
  overflow: hidden;
  position: relative;
}
.bigbox img {
  width: 152px;
}
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  cursor: pointer;
  z-index: 1;
  width: 28px;
  height: 62px;
  line-height: 62px;
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.2);
  font-family: simsun;
  transition: all ease-in 0.4s;
}
.next2 {
  right: 20px;
}

.longbox {
  transition: all 1s;
  :deep(#image) {
    width: 152px !important;
  }
}
</style>
